<template>
  <view>
    <view class="c-pd bg-white">
      <van-radio-group :value="state.alarmMode" direction="horizontal" @change="state.alarmMode = $event.detail">
        <van-radio :name="1">长时间逗留</van-radio>
        <van-radio :name="2">入寝指定时间</van-radio>
      </van-radio-group>
    </view>
    <view class="mt-3" v-if="state.alarmMode === 1">
      <van-field :value="state.alarmTime" label="逗留时间（分钟）：" placeholder="请输入" :border="false" type="number" title-width="140" @change="state.alarmTime = $event.detail" />
    </view>
    <view class="mt-3" v-else>
      <view class="bg-white c-pd flex items-center">
        <view class="w-30%">入寝时间段：</view>
        <view class="w-70%">
          <text
            class="dateBorder"
            @click="
              () => {
                state.selectType = 1;
                state.latestTimeShow = true;
              }
            "
            >{{ state.startDate ? state.startDate : '开始时间' }}</text
          >
          <text class="mx-2">—</text>
          <text
            class="dateBorder"
            @click="
              () => {
                state.selectType = 2;
                state.latestTimeShow = true;
              }
            "
            >{{ state.endDate ? state.endDate : '结束时间' }}</text
          >
        </view>
      </view>
      <van-field :value="state.allowLeaveTime" label="无人时间（分钟）：" placeholder="请输入" :border="false" title-width="140" type="number" @change="state.allowLeaveTime = $event.detail" />
      <van-field
        :value="state.latestTime"
        readonly
        label="未起时间："
        placeholder="请选择"
        :border="false"
        @click-input="
          () => {
            state.latestTimeShow = true;
            state.selectType = 3;
          }
        "
      />
    </view>
    <view class="fixed c-pd w-full" :style="{ bottom: `${store.$state.systemInfo.safeAreaInsets!.bottom}px` }">
      <van-button type="primary" block @click="submitClick">提交</van-button>
    </view>
    <van-popup position="bottom" :show="state.latestTimeShow" @close="state.latestTimeShow = true">
      <van-datetime-picker :value="state.currentDate" type="time" @confirm="selectConfirm" @cancel="selectCancel" />
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import EquipRequest from '@/request/equipRequest';
import useToast from '@/hooks/useToast';
import { useAppStore } from '@/store';

interface IState {
  infraredId: number;
  alarmMode: number;
  alarmModeName: string;
  alarmTime: string;
  allowLeaveTime: string;
  latestTime: string;
  latestTimeShow: boolean;
  startDate: string;
  endDate: string;
  currentDate: string;
  selectType: number;
}

const store = useAppStore();

const state = reactive<IState>({
  infraredId: 0,
  alarmMode: 1,
  alarmModeName: '',
  alarmTime: '',
  allowLeaveTime: '',
  latestTime: '',
  latestTimeShow: false,
  startDate: '',
  endDate: '',
  currentDate: '',
  selectType: 1, // 1选择入寝开始时间 2选择入寝结束时间 3选择未起时间
});

const { showToast } = useToast();

onLoad((options) => {
  if (!options) return;
  state.infraredId = options.infraredId;
});

const selectConfirm = (e: any) => {
  switch (state.selectType) {
    case 1:
      state.startDate = e.detail;
      break;
    case 2:
      state.endDate = e.detail;
      break;
    case 3:
      state.latestTime = e.detail;
      break;
  }
  selectCancel();
};

const selectCancel = () => {
  state.latestTimeShow = false;
};

const submitClick = () => {
  let params: any = {
    alarmMode: state.alarmMode,
    alarmTime: state.alarmMode === 1 ? state.alarmTime : state.startDate + '-' + state.endDate,
    alarmModeName: state.alarmMode === 1 ? '长时间逗留' : '入寝指定时间',
    infraredId: state.infraredId,
    hasLoading: true,
    allowLeaveTime: state.allowLeaveTime,
    latestTime: state.latestTime,
  };
  EquipRequest.EarlyWarningSetting(params).then((res) => {
    if (res.status === 0) {
      showToast('提交成功', 'success');
    }
  });
};
</script>

<style scoped lang="scss">
.dateBorder {
  color: #323233;
}
</style>
